<template>
	<view class="home">
		<uni-nav-bar shadow title="爱你的天气"></uni-nav-bar>
		<uni-notice-bar show-icon scrollable text="请选择适合你自己的方式, 设置专属于你的天气预报" />
		<view class="center_box" :style="'top:'+marginTop+'px;padding-top:'+paddingTop+'px;'" @touchstart="start" @touchend="end" @touchmove="move">
			<view class="user_info" :style="'top:-'+top+'px'">
				<view class="user_img">
					<image class="avatar" :src="userInfo.headimgurl ? userInfo.headimgurl : '../../static/logo.png'"
						mode=""></image>
				</view>
				<view class="user_name">
					{{userInfo.nickname?userInfo.nickname:'未登录'}}
				</view>
			</view>
			<view class="menu_box">
				<uni-card @click="gotoPage(item)" v-for="(item,index) in menus">
					<view class="handle_upload">
						<view style="display: flex;align-items: center;">
							<image class="icon" :src="'../../static/icon/'+item.icon+'.png'" mode=""></image>
							<view>{{item.title}}</view>
						</view>
						<view style="font-size: .6rem;color: #8b8a87;">{{item.subhead}}</view>
					</view>
				</uni-card>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		setWeChartData
	} from '@/api/openid/index.js'
	export default {
		data() {
			return {
				menus: [{
						title: '专属定制',
						id: 1,
						icon: 'sum',
						subhead: '不只是夏日限定 让我们来日方长',
						url: '/pages/account/account'
					},
					// {
					// 	title: '我自己有公众号',
					// 	id: 2,
					// 	icon: 'love',
					// 	subhead: '趁年轻 和喜欢的人做些比夏天还热烈的事吧！',
					// 	url: '/pages/notAccount/notAccount'
					// },

					{
						title: '推送管理',
						id: 3,
						icon: 'love',
						subhead: '趁年轻 和喜欢的人做些比夏天还热烈的事吧！',
						url: '/pages/list/listmodal'
					},
					{
						title: '查看用户',
						id: 4,
						icon: 'sociality',
						subhead: '趁年轻 和喜欢的人做些比夏天还热烈的事吧！',
						url: '/pages/list/list'
					},
				],
				code: '', // 获取微信登录的code
				userInfo: {
					nickname: '',
					headimgurl: '',
					openid: '',
				},
				marginTop: 160,
				paddingTop: 64,
				top: 24,
				windowHeight: ''
			
			}
		},
		onLoad(option) {
			// let userInfo = uni.getStorageSync('userInfo')
			// // console.log(userInfo);
			// if(userInfo.openid){
			// 	this.userInfo = userInfo
			// } else {
			let code = window.location.search;
			if (code) {
				this.code = code.match(/(code=?)(\S*)(?=&)/)[2]
				this.getUserInfo()
			} else {
				// uni.reLaunch({
				// 	url: '/pages/login/login'
				// })
			}
			// }
			this.windowHeight = getApp().globalData.deviceInfo.windowHeight
			this.marginTop = Math.ceil(getApp().globalData.deviceInfo.windowHeight * .4)

		},
		methods: {
			// 触摸touch事件
			start(e) { //@touchstart 触摸开始
				console.log(e);
				console.log(e.changedTouches[0].clientX); //手指按下时的X坐标  
				console.log(e.changedTouches[0].clientY); //手指按下时的Y坐标
			},
			end(e) { //@touchend触摸结束
				console.log(e);
			},
			move(e) { //@touchmove触摸移动
				console.log(e.touches[0].clientY);
				console.log(e);
			},
			// 获取用户信息
			getUserInfo() {
				let that = this
				uni.showLoading()
				let params = {
					appid: getApp().globalData.APP_ID,
					secret: getApp().globalData.SECRET,
					code: that.code,
				}
				setWeChartData(params).then(res => {
					if (res.code = 200) {
						that.userInfo = res.data
						uni.setStorageSync('userInfo', res.data)
					} else {
						uni.hideLoading()
						uni.showLoading({
							title: res.message
						})
					}
					uni.hideLoading()
				}).catch(err => {
					console.log(err);
					uni.hideLoading()
				})
			},
			// 跳转子菜单
			gotoPage(obj) {
				// if(!this.userInfo.openid){
				// 	return uni.showModal({
				// 		content:'请关注公众号后重新进入网页，完成登录'
				// 	})
				// }
				if (obj.id === 4) {
					return uni.showModal({
						title: '管理员登录',
						editable: true,
						placeholderText: '请输入管理员密码',
						success(res) {
							if (res.confirm) {
								if (res.content === '我是你爸爸') {
									uni.navigateTo({
										url: obj.url + '?userInfo=' + JSON.stringify(this.userInfo)
									})
								}
							}
						}
					})
				}
				if (obj.id === 3 || obj.id === 1) {
					return uni.showModal({
						title: '关注【每日省很多】公众号',
						content: '为了保证您的天气预报准确无误的推送给您，请先关注我们的服务号',
						cancelText: '已关注',
						confirmText: '前往关注',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/attention/attention'
								})
							} else if (res.cancel) {
								uni.navigateTo({
									url: obj.url + '?userInfo=' + JSON.stringify(this.userInfo)
								})
							}
						}
					})
				}
				uni.navigateTo({
					url: obj.url + '?userInfo=' + JSON.stringify(this.userInfo)
				})
			}
		}
	}
</script>

<style lang="scss">
	/* #ifndef H5 */
	/* page {
	padding-top: 85px;
} */
	/* #endif */
	.home {
		/* top: 44px; */
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100%;
		background-image: url('@/static/img/background_img.jpg');
		background-size: 100% 100%;
		/* background-position: center; */
		background-repeat: no-repeat;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.handle_upload {
		font-size: 1rem;
		color: black;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	// 菜单图标样式
	.icon {
		width: 2rem;
		height: 2rem;
		margin: 0 .3rem;
	}

	.user_box {
		width: 100%;
		height: 8rem;
		position: relative;
		/* background-color: #fff; */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}

	.center_box {
		position: absolute;
		// top: 6rem;
		background-color: #fff;
		width: 100%;
		// margin-top: 6rem;
		border-top-left-radius: 2rem;
		border-top-right-radius: 2rem;
		height: 100%;
		// padding-top: 4rem;
	}

	.user_info {
		/* padding: 0 .8rem; */
		position: absolute;
		// top: -1.5rem;
		left: 50%;
		transform: translate(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		color: #464646;
		// z-index: 10;
	}

	.avatar {
		width: 3rem;
		height: 3rem;
		border-radius: 100%;
		border: .0625rem solid $uni-white;
		background-color: #fff;
		/* margin-left: .6rem; */
	}

	.menu_box {}
</style>
